﻿@using thousandClear.Areas.Admin.Models;
@model OrderModel

<div id="app">
    <div class="top-header ui-row-flex">
        <div class="top-header-return ui-col ui-col-10 ui-flex ui-flex-pack-start ui-flex-align-center" id="back">
            <span style="line-height:40px;">我的订单</span>
        </div>
        <div class="top-header-title ui-col ui-col-80 ui-flex ui-flex-align-center ui-flex-pack-center">
            <h2>订单详情</h2>
        </div>
        <div class="ui-col ui-col-10">
        </div>
    </div>
    <div class="order-title">
        <span>订单详情</span>
    </div>
    <div class="order-receive">
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    订单号:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.toSerialNo
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    昵称:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.ocNicName
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    金额:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    ￥@Model.toTotalRate
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    订单状态:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                @if (Model.RowStatus == 4)
                {
                <span class="desc">
                    未支付
                </span>
                }
                else if (Model.RowStatus == 1)
                {
                <span class="desc">
                    已支付
                </span>
                }
                else if (Model.RowStatus == 3)
                {
                <span class="desc">
                    已冻结
                </span>
                }

            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    下单时间:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.CreatedDate.ToString("yyyy-MM-dd HH:mm")
                </span>
            </div>
        </div>
    </div>
    <div class="order-title">
        @if (Model.type == 1)
        {
        <span>体验详情</span>
        }
        @if (Model.type == 2 || Model.type == 3 || Model.type == 4 || Model.type == 6)
        {
        <span>套餐详情</span>
        }
        @if (Model.type == 5)
        {
        <span>单项详情</span>
        }

    </div>
    <div class="order-receive">
        @if (Model.type == 1 || Model.type == 5)
        {
            <div class="ui-row-flex order-info-item ui-border-b">
                <div class="ui-col ui-border-r">
                    @if (Model.type == 1)
                        {
                        <span class="title">
                            体验日期:
                        </span>
                        }
                    @if (Model.type == 5)
                        {
                        <span class="title">
                            服务日期:
                        </span>
                        }
                </div>

                <div class="ui-col ui-col-3">
                    <span class="desc">
                        @Model.startDay
                    </span>
                </div>
            </div>

            if (Model.type == 5)
            {
                <div class="ui-row-flex order-info-item ui-border-b">
                    <div class="ui-col ui-border-r">
                        <span class="title">
                            服务项目:
                        </span>
                    </div>
                    <div class="ui-col ui-col-3">
                        <span class="desc">
                            @Model.returnContent
                        </span>
                    </div>
                </div>
            }



            <div class="ui-row-flex order-info-item ui-border-b">
                <div class="ui-col ui-border-r">
                    <span class="title">
                        时间段:
                    </span>
                </div>
                <div class="ui-col ui-col-3">
                    <span class="desc">
                        @Model.osaTimeslot
                    </span>
                </div>
            </div>
            <div class="ui-row-flex order-info-item ui-border-b">
                <div class="ui-col ui-border-r">
                    <span class="title">
                        备注:
                    </span>
                </div>
                <div class="ui-col ui-col-3">
                    <span class="desc">
                        @Model.toRemark
                    </span>
                </div>
            </div>

        }

        @if (Model.type == 2 || Model.type == 3 || Model.type == 4 || Model.type == 6)
        {

        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    服务类型:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                @if (Model.type == 2)
                {
                    <span class="desc">
                        签约千净(季度卡)
                    </span>
                    }
                @if (Model.type == 3)
                {
                    <span class="desc">
                        签约千净(半年卡)
                    </span>
                    }
                @if (Model.type == 4)
                {
                    <span class="desc">
                        签约千净(全年卡)
                    </span>
                    }
                @if (Model.type == 6)
                {
                    <span class="desc">
                        签约千净(月卡)
                    </span>
                    }
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    每月次数:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.ogsTimeMonth /次
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    开卡时长:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.toSignTime /月
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    赠送时长:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @if (Model.ogsTimeMonth > 1)
                    {
                        @(((Model.ogsTime - Model.ogsTimeMonth * Model.ogsSignTime) / Model.ogsTimeMonth) < 0 ? 0 : ((Model.ogsTime - Model.ogsTimeMonth * Model.ogsSignTime) / Model.ogsTimeMonth))<span>个月</span>
                    }

                    @if (Model.ogsTimeMonth <= 1)
                    {
                        <span>0个月</span>
                    }
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    开始日期:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.startDay
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    结束日期:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.endDay
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    日常总次数:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @(Model.ogsTime + Model.yue) /次
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    日常剩余次数:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @(Model.toTime) /次
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    专项总次数:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @(Model.ogsSeqNum + Model.toZengSongLieji)/次
                </span>
            </div>
        </div>
        <div class="ui-row-flex order-info-item ui-border-b">
            <div class="ui-col ui-border-r">
                <span class="title">
                    专项剩余次数:
                </span>
            </div>
            <div class="ui-col ui-col-3">
                <span class="desc">
                    @Model.a  /次
                </span>
            </div>
        </div>

        }

        <div class="order-title">
            <span>客户详情</span>
        </div>

        <div class="order-receive">
            <div class="ui-row-flex order-info-item ui-border-b">
                <div class="ui-col ui-border-r">
                    <span class="title">
                        客户:
                    </span>
                </div>
                <div class="ui-col ui-col-3">
                    <span class="desc">
                        @Model.oasName
                    </span>
                </div>
            </div>
            <div class="ui-row-flex order-info-item ui-border-b">
                <div class="ui-col ui-border-r">
                    <span class="title">
                        联系电话:
                    </span>
                </div>
                <div class="ui-col ui-col-3">
                    <span class="desc">
                        @Model.osaPhone
                    </span>
                </div>
            </div>
            <div class="ui-row-flex order-info-item ui-border-b">
                <div class="ui-col ui-border-r">
                    <span class="title">
                        详细地址:
                    </span>
                </div>
                <div class="ui-col ui-col-3">
                    <span class="desc">
                        @Model.oasAddressDetail
                    </span>
                </div>
            </div>
        </div>


        <div class="order-info">
            <form id="form" action="../checkout" method="get">
                <input name="data" v-bind:value="data" type="hidden" />
            </form>
        </div>



        <div class="ui-btn-group">

            @if (Model.RowStatus == 4)
            {
            <button class="ui-btn ui-btn-primary" id="pay" style="height: 50px; font-size: 18px;">
                付款
            </button>
            }
            @*@if (Model.RowStatus == 5)
            {
            <button class="ui-btn ui-btn-primary" id="lookAunt">
                查看管家信息及打扫记录
            </button>
            }*@
        </div>
        <div class="ui-btn-group">


        </div>

        <br />

    </div>
</div>

@section Styles{
    @Styles.Render("~/cssbundles/consumer/address")
    <style>
        body {
            background-color: #f8f8f8;
        }

        .top-header {
            font-size: 16px;
            color: black;
            background-color: white;
            width: 100%;
            height: 40px;
        }

        .top-header-title {
            font-weight: bold;
        }

        .top-header .ui-icon-return {
            font-size: 0.25rem;
            color: black;
        }

        .order-title {
            margin-top: 10px;
        }

            .order-title span {
                margin-left: 10px;
                padding-left: 20px;
                font-weight: bold;
            }

        .order-list, .order-info, .order-receive {
            padding: 10px;
            font-size: 14px;
            color: black;
        }

        .order-receive {
            padding: 10px;
        }

            .order-receive .ui-form-item {
                font-size: 14px;
            }

        .order-list-photo {
            padding-top: 10px;
            padding-bottom: 5px;
        }

        .order-list-price {
            text-align: right;
            font-size: 10px;
        }



        .order-info-item {
            padding: 10px 0;
        }

            .order-info-item .desc {
                margin-left: 10px;
            }
    </style>

}

@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")

    <script>
        $('#back').click(function () {
            window.location.replace("../Order/list?openid=@ViewBag.openid");
        });

        $('#pay').click(function () {
            window.location.replace("../Order/Checkout?order=@Model.toSerialNo&openid=@ViewBag.openid");
        });
        $('#lookAunt').click(function () {
            window.location.replace("../Order/LookAunt?order=@Model.toSerialNo&openid=@ViewBag.openid");
        });

    </script>
}
